<template>
  <div >
      <!-- 设备 状态 -->
    <div class='app-container'>
      <el-form ref="form" label-width="80px" inline :model="form" >
  <el-form-item label="设备编号:" >
    <el-input v-model="form.innerCode" palceholder='请输入'></el-input>
  </el-form-item>
  
  

  <el-form-item>
    <el-button type="primary" @click='search'><i class="el-icon-search"></i>查询</el-button>
  </el-form-item>
  </el-form>
    </div> 


  <div class='app-container'>
    
  
    <el-table style="width: 100%" :data='shjlblist'>
      <el-table-column
        label="序号"
        type='index'
        :index='getIndex'
        >
      </el-table-column>
      <el-table-column
        prop="innerCode"
        label="设备编号"
        >
      </el-table-column>
      <el-table-column
        prop="type.name"
        label="设备型号">
      </el-table-column>
         <el-table-column
        prop="node.name"
        label="详细地址">
      </el-table-column>
       <el-table-column
        prop="vmStatus"
        label="运营状态">
        </el-table-column>
        <!-- status   售货机状态(0:未投放;1-运营;3-撤机) -->
        <el-table-column
        prop="businessId"
        label="设备状态">
      </el-table-column>
      <el-table-column
        label="操作">
        <template #default='{row}'>
        <el-button type="text" @click='detail(row.innerCode)'>查看详情</el-button>
        </template>
      </el-table-column>
      
    </el-table>
      <div class="page">
        <div class="left">
          <span>共{{params.totalCount}}条记录</span>
          <span>第 {{params.pageIndex}}/{{params.totalPage}}页</span>
        </div>
        <div class="right">
          <el-button-group>
      <el-button type="primary" 
      @click=shjlbAp(-1) :disabled='params.pageIndex<=1?true:false'>上一页</el-button>
      <el-button type="primary" @click=shjlbAp(1)>下一页</el-button>
      </el-button-group>
        </div>
      </div>
    </div>

    
  
  <detail :detaill.sync='detaill' :row='row'></detail>
  </div>
</template>

<script>

import Detail from './components/detail.vue'
import {searchApi,gettstatus} from '@/api/order'
import {getListApi} from '@/api/order'

import {shjlbApi , shjlxlbApi} from '@/api/deviceManagement'

//  查看详情渲染
  import {shjspxlApi ,seachshjApi} from '@/api/DeviceStatus'
 
export default {
  name: 'HrsaasIndex',
  components:{
    Detail
  },
  data() {
    return {
      form:{
        taskCode: '',
      },
       
        detaill:false,
        row:{},
        params:{
          pageIndex: 0,
          pageSize: 10,
          totalCount:0,
          totalPage:0,
          isRepair: false
        },
      
        //  搜索售货机(售货机列表)  渲染页面表格
        shjlblist : [] ,
    };
  },

  created() {

     // 搜索售货机(售货机列表) 
    this.shjlbAp()
   
  },

  methods: {
     
    
    

    // 查看详情
    async detail(row){
      this.detaill=true
      // console.log(row,'row是啥');
      // 获取售货机商品销量
      const res =  await shjspxlApi({innerCode:`${row}`,start:'2020-01-01',end:'2023-03-03'})
         console.log(res,'获取售货机商品销量');
         this.row=res 

    },

    // 查询
   async search(){
      const res= await shjlbApi(this.form)
      console.log(res,'hhhhhhhhh');
      console.log(this.form);
      this.shjlblist=res.currentPageRecords
    },
    
  // 排序延续
  getIndex (index) {
  const page = this.params.pageIndex
  const pagesize = this.params.pageSize//当前页数 - 1*每页数据条数 + index + 1
  return (page - 1) * pagesize + index + 1},
  
  // 重新创建
  edit(row){
    this.detaill=false
    this.visible=true
    // console.log(row,'row的数据传递过来了吗');
    // const {createType,innerCode,userId,productTypeId:productType,desc,details} = row
    // this.$refs.add.form={createType,innerCode,userId,productType,desc,details}
    this.$refs.add.form={...row}
    // console.log(this.$refs.add.form,'好奇这个数据');
  },

// 搜索售货机(售货机列表)    渲染主页面
   async shjlbAp(num=0){
     this.params.pageIndex=+this.params.pageIndex+num
      const res =  await shjlbApi(this.params)
      this.params.pageIndex=res.pageIndex
      this.params.totalPage=res.totalPage
      //  console.log(res.currentPageRecords,'新增售货机类型');    //currentPageRecords
       this.shjlblist = res.currentPageRecords
      this.shjlblist.forEach(ele => {
        ele.method = '手动'
      })
      this.params.totalCount = parseInt(res.totalCount)
      // console.log(this.list,'真个页面结果是什么');
   },
    
  //  查看详情渲染
  //   async shjspxlAp(){
  //       console.log(this.row,'111111');
  //       const res =  await shjspxlApi({innerCode:`${this.row.clientId}`,start:'2020-01-01',end:'2023-03-03'})
  //      console.log(res,'渲染查看详情');   
     
  //  }



  },
};
</script>

<style lang="scss" scoped>
.el-form{
  // width: 1159px;
  height: 64px;
  padding-top: 14px;
  background-color: #fff;
  border:none
}
.el-icon-search{
  margin-right: 7px;
}
.config{
  background-color: #fbf4f0;
  color:#655b56;
  border:none;
  cursor: pointer;
}
.config1{
  background-color: #ff893b;
  color:#fff;
  border:none;
  cursor: pointer;
}
.el-table{
  padding: 10px;
  border:none
}
.page{
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-right: 5px;
    }
  }
  .right{
    margin-left: 750px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }
    
  }
}
</style>